<template>
  <div class="nav">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="订单编号">
        <el-input
            placeholder="品牌名称"
            v-model="searchParams.id"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单类型">
        <el-select placeholder="请选择" v-model="searchParams.orderType">
          <el-option
              v-for="(key,value) in orderTypeList"
              :key="value"
              :label="key"
              :value="value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式">
        <el-select placeholder="请选择" v-model="searchParams.paymentMethodId">
          <el-option
              v-for="(key,value) in payTypeList"
              :key="key"
              :label="key"
              :value="value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型">
        <el-select placeholder="请选择" v-model="searchParams.businessType">
          <el-option
              v-for="(key,value) in businessTypeList"
              :key="value"
              :label="key"
              :value="value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间">
        <el-date-picker
            v-model="pickerOptions.startDate"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="chooseTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="订单动作">
        <el-select placeholder="请选择" v-model="searchParams.orderAction">
          <el-option
              v-for="(key,value) in orderActionlist"
              :key="value"
              :label="key"
              :value="value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="this.pageFind">搜索</el-button>
        <el-button type="warning" @click="resetForm">重置</el-button>
        <el-button type="info" @click="selectBy">生成出库单</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
          :data="this.orderList"
          style="width: 100%"
          ref="multipleTable"
          @selection-change="handleSelectionChange">
        >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="订单编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="orderType"
            label="订单类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="orderAction"
            label="订单动作"
            width="180">
        </el-table-column>
        <el-table-column
            prop="businessType"
            label="业务类型">
        </el-table-column>
        <el-table-column
            prop="deliveryStyle"
            label="配送方式">
        </el-table-column>
        <el-table-column
            prop="paymentMethodId"
            label="支付方式">
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态">

        </el-table-column>
        <el-table-column
            label="操作">
          <template v-slot="obj">

            <el-button
                type="primary"
                icon="el-icon-upload2"
                round
                @click="lookOrderInfo(obj.row)">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
          background
          layout="prev, pager, next"
          :total=total
          :current-page="this.searchParams.currentPage"
          :page-size="this.searchParams.pageSize"
          @current-change="currentPageChange"
          align="right">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  excelPort,
  findAll,
  // findeOrderByIdList,
  findOrderGoods,
  findReceiverByOrderId,
  GetdataDictionary, orderOutStock, outStock,
} from "@/api/b2c/order";
import pickerOptions from "@/utils/date";

export default {
  name: "index",
  data() {
    return {
      size: '',
      dialogFormVisible: false,
      payTypeList: [],
      orderActionlist: [],
      orderTypeList: [],
      orderStatusList: [],
      businessTypeList: [],
      orderList: [],
      orderProductList: [],
      goodList: [],
      formData: {},
      excelIdlIST: {
        id: ``,
      },
      receiverInfo: [],
      idList: [],
      multipleSelection: [],
      total: 0,
      pickerOptions: pickerOptions,
      searchParams: {
        currentPage: 1,
        pageSize: 8,
        id: ``,
        orderType: ``,
        paymentMethodId: ``,
        orderAction: ``,
        businessType: ``,
        orderStatus: ``
      },
      table: {},
    }
  },
  methods: {
    findOrderList() {
      findAll().then(response => {
        console.log(response)
        this.orderList = response;
        console.log(this.orderList)
      })
    },
    //分页查询
    async pageFind() {
      let response = await orderOutStock(this.searchParams)
      this.total = response.total;
      this.orderList = response.data;
    },
    //页面变化
    currentPageChange(currentIndex) {
      // console.log(currentIndex);
      this.searchParams.currentPage = currentIndex;
      this.pageFind()
    },
    //选择时间
    chooseTime() {
      this.searchParams.startTime = this.pickerOptions.startDate[0];
      this.searchParams.endTime = this.pickerOptions.startDate[1];
    },
    //重置
    resetForm() {
      this.searchParams = {
        currentPage: 1,
        pageSize: 8,
      }
      this.pickerOptions.startDate = '';
      this.pageFind();
    },
    async querydic() {
      //1.订单动作 2 订单状态 3 业务类型 4 配送方式  5 支付方式  6订单分类订单类型 7 退货原因 ',
      let result = await GetdataDictionary();
      console.log(result)
      this.orderActionlist = result[1]
      this.orderStatusList = result[2]
      this.businessTypeList = result[3]
      this.payTypeList = result[5]
      this.orderTypeList = result[6]
      console.log(this.orderTypeList)
    },
    async findOrderById(row) {
      this.formData = await row
      this.goodList = await findOrderGoods(row.id)
      console.log(this.goodList)
      await this.findReceive(row)
      console.log(this.receiverInfo);
      // await findeOrderByIdList(this.idList)
    },
    //根据订单id查询收货人信息
    async findReceive(row) {
      this.receiverInfo = await findReceiverByOrderId(row.id)
    },
    //选中数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量导出
    async selectBy() {
      this.idList = this.multipleSelection.map(item => item.id)
      await excelPort(this.idList)
      await outStock(this.idList).then(response => {
        if (response === true) {
          this.openVn()
        }
      })
      this.pageFind()
      console.log(this.idList);
    },
    /**
     * 单个导出
     * @returns {Promise<void>}
     */
    async hhhh() {
      await excelPort(this.excelIdlIST)
    },
    //查看订单详细信息
    lookOrderInfo(row) {
      location.href = "/order/orderInfo/" + row.id
    },

    //过滤
    async backOrder() {
      location.href = "/order"
    },
    openVn() {
      const h = this.$createElement;
      this.$message({
        message: h('p', null, [
          h('span', null, '已发送'),
          h('i', {style: 'color: green'}, '快点出库')
        ])
      });
    }

  },
  created() {
    this.pageFind()
    this.querydic()
  }
}
</script>
<style scoped>

</style>